<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>Login Page</title>
<!--    jquery-->
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <!-- 样 式 文 件 -->
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}" />
    <link rel="stylesheet" th:href="@{/pear-admin/css/other/login.css}" />

</head>
<!-- 代 码 结 构 -->
<body background="/pear-admin/images/background.svg" style="background-size: cover;">
<form id="fm" class="layui-form" th:action="@{/login}" autocomplete="off" method="post">
    <div class="layui-form-item">
        <img class="logo" th:src="@{/pear-admin/images/logo2.png}" />
        <div class="title">yblog Admin</div>
    </div>
    <div class="layui-form-item">
        <input name="username" placeholder="帐号" lay-verify="required" hover class="layui-input"  />
    </div>
    <div class="layui-form-item">
        <input name="password" placeholder="密码" type="password" lay-verify="required" hover class="layui-input"  />
    </div>
    <div class="layui-form-item">
        <input name="captcha" placeholder="验证码"  hover  lay-verify="required" class="code layui-input layui-input-inline"  />
        <img id="cap" onclick="refreshCaptcha()" th:src="@{/pear/captcha}" class="codeImage" />
    </div>
    <div class="layui-form-item">
        <input type="checkbox" name="remember-me" title="记住密码" lay-skin="primary" checked>
    </div>
    <div class="layui-form-item">
<!--        <button type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">-->
<!--            登 录-->
<!--        </button>-->
        <button type="submit" class="pear-btn pear-btn-success login">
            登 录
        </button>
    </div>

    <div class="layui-form-item" style="text-align:center;color: DarkGray;">
        <span>其他方式登录</span>

    </div>
    <div class="layui-form-item" style="text-align:center;">
        <a href="https://github.com/login/oauth/authorize?client_id=xxx&redirect_uri=http://localhost/github/callback&state=test&scope=user">
            <img style="width: 23.7px;height: 23.7px;" th:src="@{/user/img/auth/github.png}">
        </a> 
        <a href="https://gitee.com/oauth/authorize?client_id=e3c40923721dcdcb71580dcc4f037cf7cc9d91dc4be91c6b10afb85b1f3bb755&redirect_uri=http://localhost/gitee/callback&response_type=code">
            <img style="width: 23.7px;height: 23.7px;" th:src="@{/user/img/auth/gitee.png}">
        </a> 
    </div>
</form>
<!-- 资 源 引 入 -->
<script th:src="@{/component/layui/layui.js}"></script>
<script th:src="@{/component/pear/pear.js}"></script>
<script>


    // // 获取<meta>标签中封装的_csrf信息 ,否则会请求403
    // var token = $("meta[name='_csrf']").attr("content");
    // var header = $("meta[name='_csrf_header']").attr("content");
    // var headers = {"X-CSRF-TOKEN": token}
    // layui.use(['form','jquery','layer','button','popup'], function() {
    //     let form = layui.form;
    //     let $ = layui.jquery;
    //     let layer = layui.layer;
    //     let button = layui.button;
    //     let popup = layui.popup;
    //
    //
    //     form.on('submit(login)', function (data) {
    //         let loader = layer.load();
    //         let btn = button.load({elem: '.login'});
    //         $.ajax({
    //             url: '/login',
    //             data: $('#fm').serialize(),
    //             type: "post",
    //             dataType: 'json',
    //             headers:headers,
    //             contentType:false,
    //             success: function (result) {
    //                 alert(result.msg);
    //                 layer.close(loader);
    //                 btn.stop(function () {
    //                     if (result.success) {
    //                         popup.success(result.msg, function () {
    //                             location.href = "/";
    //                         })
    //                     } else {
    //                         popup.failure(result.msg, function () {
    //                             document.getElementById("cap").src = '/pear/captcha?r=' + Math.random();
    //                         });
    //                     }
    //                 })
    //             }
    //         });
    //         return false;
    //     });
    // })

    function refreshCaptcha() {
        document.getElementById('cap').src = '/pear/captcha?r=' + Math.random();
    }


</script>
</body>
</html>
